<template>
  <div class="page_content">
    <!-- 顶部标题组件 -->
    <HeardNav title="个人中心" />
    <div class="content">
      <!-- 个人信息 -->
      <div class="user_info">
        <div class="img_box">
          <van-image class="user_img" :src="require('@/assets/user_empty.png')" round width="60" height="60">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
        <div class="name">{{ $store.getters.userInfo.name }}</div>
        <div class="role">
          <van-tag v-if="$store.getters.userInfo.admin" class="admin" type="danger">超级管理员</van-tag>
        </div>
      </div>
      <!-- 操作栏 -->
      <div class="cell_list">
        <div v-for="item in cellList" :key="item.id" class="cell_box">
          <van-cell
            :title="item.title"
            :icon="item.icon"
            :value="item.value"
            is-link
            @click="clickCell(item)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { param2Obj } from '@/utils'
import { judgeBrowser } from '@/utils/index.js'
import HeardNav from '@/components/heardNav'
import { Image as VanImage, Tag } from 'vant'
export default {
  components: { HeardNav, VanImage, [Tag.name]: Tag },
  data() {
    return {
      cellList: [
        { id: '1', title: '回忆', icon: 'gift-o', value: '', router: '/birthday/memoryList' }
        // { id: '2', title: '我的祝福', icon: 'gift-card-o', value: '', router: '/bless/list' }
      ]
    }
  },
  mounted() {
    const { iframe } = param2Obj(window.location.href)
    console.log(window.location.href, iframe)
    // 手机端或者PC端嵌入的iframe
    if (judgeBrowser().isMobile || iframe || this.$store.getters.iframe) {
      if (iframe && !this.$store.getters.iframe) {
        this.$store.dispatch('user/SetIframe', true).then(() => {})
      }
    } else {
      this.$router.push({ path: '/pc', query: { src: window.location.href }})
    }
  },
  methods: {
    // 点击操作项
    clickCell(item) {
      this.$router.push(item.router)
    }
  }
}
</script>

<style lang="less" scoped>
.page_content {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: auto;
  .content {
    padding: 88px 0 0;
  }
}
.user_info {
  background-color: #fff;
  padding: 20px 10px;
  .img_box {
    text-align: center;
  }
  .name {
    font-size: 28px;
    font-weight: bolder;
    text-align: center;
    margin: 10px 0 20px;
  }
  .role {
    text-align: center;
    .admin {
      padding: 6px 8px;
      border-radius: 3px;
      margin-bottom: 10px;
    }
  }
}
.cell_list {
  border-top: 1px solid #ebedf0;
  .cell_box {
    border-bottom: 1px solid #ebedf0;
  }
}

</style>
